<!--
 * @Author: lmk
 * @Date: 2021-11-24 15:02:28
 * @LastEditTime: 2021-12-09 19:11:58
 * @LastEditors: lmk
 * @Description: 
-->
<template>
	<view :class="currentTheme">
		<a-nabbar name="退回管理" />
		<view class="u-flex u-padding-left-32 u-padding-right-32 u-padding-top-32">
			<view class="u-flex-1"><item-search placeholder="搜索退还人或剧本名" @change="setDown" v-model="wantForm.name"></item-search></view>
			<view class="u-padding-left-36" @click="showSearchBox"><u-icon name="fenlei1" custom-prefix="custom-icon" color="#333333" size="46"></u-icon></view>
		</view>
		<view class="u-padding-left-32 u-padding-right-32 sticky-tabs " >
			<me-tabs v-model="indexCurrent" @tabTop="getTabTop" :height="88" :tabs="tabs" @change="tabGetChange" activeColor="#765CFE" nameKey="tabname"></me-tabs>
		</view>
		<swiper :indicator-dots="false" :autoplay="false" :style="swiperStyle"  :duration="300" :current="tabIndex" @change="getChange" v-if="flag">
			<swiper-item  v-for="(a,b) in tabs" :key="b" >
				<mescroll-item :tabIndex="b" :tab="a" ref="mescroll" @logistics="logistics"></mescroll-item>
			</swiper-item>
		</swiper>
		<!-- 时间筛选 -->
		<u-popup mode="bottom" v-model="searchPopFlag" borderRadius="26" :mask-close-able="maskClickFlag">
			<view class="pop-title u-text-center u-font-36 box-title text-bold">筛选</view>
			<view class="u-padding-left-32 u-padding-right-32">
				<view class="u-font-32 box-title search-item-title text-bold">时间</view>
				<view class="search-container">
					<select-item  v-model="wantForm.startTimeStr" mode="time" ref="startTimeView" @getSelect="getTimeChange" @actionSheetClick="getActionSheetClick"/>
					<view class="u-text-center u-font-28 box-title text-bold u-margin-top-26 u-margin-bottom-26">至</view>
					<select-item  v-model="wantForm.endTimeStr" mode="time"  ref="endTimeView"  @getSelect="getTimeChange"   @actionSheetClick="getActionSheetClick"/>
				</view>
				<view class="search-box-btns u-flex">
					<view class="reset-btn search-btn u-flex-1 u-font-32 box-title text-bold" @click="resetTime">
						重置
					</view>
					<view class="confirm-btn search-btn u-flex-1 u-font-32 text-white text-bold" @click="confirmSearch">完成</view>
				</view>
			</view>
		</u-popup>
		<!-- 物流信息弹框 -->
		<u-popup  v-model="show" mode="center" border-radius="14" width="85%" closeable :mask-close-able="false">
			<view class="u-padding-10 content-desc-item text-bold u-text-center u-border-bottom u-font-32">物流信息</view>
			<view>
				<view class="u-padding-20 ">
					<text class="u-font-28 text-order-time u-margin-top-20">订单号：{{checkObj.orderId}}</text>
					<!-- <view class="u-font-32 u-margin-bottom-10">{{['暂无物流信息','已揽件','运输中','已签收','问题件'][checkObj.State]}}</view> -->
				</view>
				<scroll-view scroll-y="true" class="scroll-view" v-if="checkObj.Traces&&checkObj.Traces.length">
					<view class="u-padding-32">
						<u-time-line>
							<u-time-line-item nodeTop="2" v-for="(item,index) in checkObj.Traces" bg-color="transparent" :key="index">
								<template slot="content">
									<view class="">
										<view class="u-order-desc">{{item.AcceptStation}}</view>
										<view class="u-margin-top-10">{{item.AcceptTime}}</view>
									</view>
								</template>
							</u-time-line-item>
						</u-time-line>
					</view>
				</scroll-view>
				<empty v-else :option="{tip:'暂无物流信息'}"></empty>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import MescrollItem from "./swiperItem.vue";
	import swiperList from '@/mixins/swiperList.js'
	import pageMixins from '@/pages/pageMixins.js'
	import itemSearch from '@/components/itemSearch/itemSearch.vue'
	import dayjs from 'dayjs'
	import empty from '@/components/mescroll-uni/components/mescroll-empty.vue'

	import {customRequest,add,deleteIds,getDetail,update } from '@/api/crud.js'

	export default {
		mixins:[swiperList,pageMixins],
		components: {
			itemSearch,MescrollItem,empty
		},
		data() {
			return {
				tabs:[{
					tabname: '全部',
					value: ''
				}, {
					tabname: '不采纳',
					value: 0,
					isAdopt:0
				}, {
					tabname: '采纳',
					value: 1,
					isAdopt:1
				}],
				wantForm:{
					name:'',
					startTime:'',
					endTime:'',
					startTimeStr:"",
					endTimeStr:""
				},
				otherHeight:"152rpx",
				flag:false,
				searchPopFlag:false,
				maskClickFlag:true,
				show:false,
				logisticsLoading:false,
				checkObj:{},
				apiModule:'shopApi',
			}
		},
		onLoad(option) {
			// this.tabs = this.tabs.map(val=>{
			// 	val.productType = option.type || 'script,groupBuy'
			// 	return val;
			// })
			this.flag=true;
		},
		//获取选择的时间 判断开始时间不能小于结束时间
		methods:{
			setDown(){
				const ref = this.$refs.mescroll;
				ref.forEach(val=>{
					val.form = {...val.form,...this.wantForm};
					val.downCallback();
					console.log(val.form)
				})
			},
			getTimeChange(item){
				setTimeout(()=>{
					const startTimeref = this.$refs.startTimeView;
					const endTimeref = this.$refs.endTimeView;
					console.log(startTimeref.value)
					console.log(endTimeref.value)
					const startTime = startTimeref.value ? startTimeref.value+" 00:00:00" : ''
					const endTime = endTimeref.value ? endTimeref.value+" 00:00:00" : ''
					if(startTimeref.value && endTimeref.value&&dayjs(startTime).unix()>dayjs(endTime).unix()){
						uni.showModal({
							showCancel:false,
							content:'结束时间小于开始时间，请重新设置',
							title:'温馨提示'
						})
						return false;
					}
					this.wantForm.startTime = startTime;
					this.wantForm.endTime = endTime
				},10)
			},
			showSearchBox(){
				this.searchPopFlag = true;
			},
			confirmSearch(){
				this.searchPopFlag = false;
				this.setDown()
			},
			getActionSheetClick(flag){
				this.maskClickFlag = !flag
			},
			resetTime(){
				this.wantForm.startTime = '';
				this.wantForm.startTimeStr = '';
				this.wantForm.endTime = '';
				this.wantForm.endTimeStr = ''
			},
			//查看物流
			logistics(item){
				if(this.logisticsLoading){
					this.$u.toast("点那么快干啥？")
					return false;
				}
				this.show = true;
				this.logisticsLoading = true;
				//订单以前用的cartInfoId 现在不知道用退回的哪个id查询物流信息
				console.log(typeof item.cartInfoId.toString())
				getDetail({cartInfoId:item.cartInfoId.toString()},'storeOrder',this.apiModule,'expressExperience').then(res=>{
					this.show = true
					this.checkObj = {...item,...res};
				}).finally(()=>{
					this.logisticsLoading = false;
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.addlarp-btn-box{
		padding: 0 283rpx;
	}
	.page-title{
		&::after{
			content: '';
			display: block;
			height: 4rpx;
			width: 320rpx;
			margin: 27rpx auto;
			background-color: $primary;
		}
	}
	.right-search{
		width: 30.5vw;
		position: relative;
		&::before{
			content: "";
			position: absolute;
			width: 1rpx;
			height: 29rpx;
			border-left: 1rpx solid var(--line-color);
			top: 50%;
			left: 0;
			margin-top: -15rpx;
		}
	}
	.pop-title{
		line-height: 104rpx;
	}
	.search-item-title{
		margin-bottom: 48rpx;
	}
	.search-container{
		width: 365rpx;
		margin: 0 auto 64rpx;
	}
	.search-box-btns{
		margin-bottom: 60rpx;
		.search-btn{
			height: 88rpx;
			line-height: 88rpx;
			text-align: center;
		}
		.reset-btn{
			background: var(--background-second-color);
			border-radius: 44rpx 0 0 44rpx;
		}
		.confirm-btn{
			background: var(--theme-color);
			border-radius: 0 44rpx 44rpx 0;
		}
	}
</style>